<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"
    />
    <title>COS 音视频</title>
    <link
      href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.min.css"
      rel="stylesheet"
    />
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.2.min.js 之前引入 hls.min.0.13.2m.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js"></script>
    <!--播放器脚本文件-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.0/tcplayer.v4.5.0.min.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
      }
      .tcplayer {
        margin: 0 auto;
        width: 100%;
        height: 100%;
      }
      /* 设置logo在高分屏的显示样式 */
      @media only screen and (min-device-pixel-ratio: 2),
        only screen and (-webkit-min-device-pixel-ratio: 2) {
        .tcp-logo-img {
          width: 50%;
        }
      }
      .vjs-poster {
        width: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;
      }
      .ad-text-node {
        background: rgba(255, 255, 255, 0.2);
        width: 44px;
        height: 23px;
        margin: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        font-size: 12px;
      }
      .ad-close-icon-node {
        width: 14px;
        height: 14px;
        display: inline-block;
        margin-left: 10px;
        background-image: url(https://cos-video-1258344699.cos.ap-guangzhou.myqcloud.com/icon%2Fclose.png);
        background-size: cover;
        cursor: pointer;
        margin: 6px;
      }
    </style>
  </head>
  <body>
    <!-- 设置播放器容器 -->
    <video
      id="player-container-id"
      preload="auto"
      width="100%"
      height="100%"
      playsinline
      webkit-playsinline
    ></video>
    <!--
注意事项：
* 播放器容器必须为 video 标签
* player-container-id 为播放器容器的ID，可自行设置
* 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器

-->
    <script>
      var PosterImage = TCPlayer.getComponent('PosterImage');
      PosterImage.prototype.handleClick = function () {
        window.open('https://cloud.tencent.com/product/ci');
      };

      var player = TCPlayer('player-container-id', {
        poster:
          'https://cos-video-1258344699.cos.ap-guangzhou.myqcloud.com/advertise.png',
      });
      player.src(
        'https://cos-video-1258344699.cos.ap-guangzhou.tencentcos.cn/test.mp4'
      );

      var adTextNode = document.createElement('span');
      adTextNode.className = 'ad-text-node';
      adTextNode.innerHTML = '广告';

      var adCloseIconNode = document.createElement('i');
      adCloseIconNode.className = 'ad-close-icon-node';
      adCloseIconNode.onclick = function (e) {
        e.stopPropagation();
        player.posterImage.hide();
      };

      player.posterImage.el_.appendChild(adTextNode);
      player.posterImage.el_.appendChild(adCloseIconNode);

      player.on('pause', function () {
        player.posterImage.show();
        player.posterImage.el_.style.width = '60%';
        player.posterImage.el_.style.height = '60%';
        player.posterImage.el_.style.display = 'flex';
      });

      player.on('playing', function () {
        player.posterImage.hide();
      });
    </script>
  </body>
</html>
